<template>
 <div class="nongfu">
  <router-link  to="/clubs">
    <div class="club">
   <b> 7CLUB</b>
  </div>
  </router-link>
  <div class="situation">
    <img
      src="https://img2.baidu.com/it/u=316984640,3597878536&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
      alt=""
    />
    <div class="top">
      <h4>番茄烩牛肉   <b><van-icon name="star-o" /><span @click="count++">{{ count }}</span></b></h4>
      <p> 10-30分钟</p>
      <p class="fiter"><img src="https://img1.baidu.com/it/u=2651346580,3156357349&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">豆果美食</p>
      <van-collapse class="count" v-model="activeNames" style="background: #ececec">
          <van-collapse-item  title="  征集时间 2022.12.27-2023.01.12 18:00 参与规则" name="1">内容</van-collapse-item>
      </van-collapse>
    </div>
    <div class="ingrend">
      <h4>食材清单</h4>
      <p>主料:</p>
      <div class="Ingredients">
        <p>牛腱肉  <span>500克</span></p>
        <p>西红柿  <span>一个</span></p>
      </div>
      <div class="Ingredients">
        <p>洋葱  <span>10克</span></p>
        <p>红葡萄酒  <span>适量</span></p>
      </div>
      <p >辅料:</p>
      <div class="Ingredients">
        <p>牛腱肉  <span>500克</span></p>
        <p>西红柿  <span>一个</span></p>
      </div>
      <div class="Ingredients">
        <p>洋葱  <span>10克</span></p>
        <p>红葡萄酒  <span>适量</span></p>
      </div>
    </div>
    <div class="steps">
      <h4>烹饪步骤</h4>
      <div class="step">
        <h6>第一步</h6>
        <img src="https://img2.baidu.com/it/u=2883178754,250410586&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
        <p>准备材料</p>
      </div>
      <div class="step">
        <h6>第二步</h6>
        <img src="https://n.sinaimg.cn/sinakd10115/600/w1280h920/20201106/736f-kcpxnwv9128890.jpg" alt="">
        <p>去皮切块</p>
      </div>
    </div>
  </div>
 </div>
</template>

<script>
  export default {

    data() {
    return {
      activeNames: ['0'],
      count:0
    };
  }
  }
</script>

<style lang="scss" scoped>
.nongfu{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.situation{
  position: relative;
  background: #f5f5f5;
  overflow: scroll;
  flex: 1;
}
img {
    width: 100%;
    height: 200px;
  }

.top {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 20px;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  p {
    margin-left: 10px;
    font-size: 12px;
    margin-top: 5px;
  }
  h4 {
    margin-left: 10px;
    b{
      float: right;
      margin-right: 10px;
    }
    span{
      display: block;
    }
    .van-icon {
      font-size: 20px;
    }
  }
}

.fiter{
  img{
    width: 30px;
    height: 30px;
  }
  font-size: 16px;
}
.van-collapse-item{
  text-align: center;
}
.count{
  background:#ececec;
  border-radius:10px ;
  overflow: hidden;
}
.ingrend{
margin-top:150px ;
p{
  margin-top:20px ;
}
}
.Ingredients{
  margin-top: 10px;
  display: flex;
  margin-left: 10px;
  span{
    font-size: 14px;
    color:rgba($color: #000000, $alpha: 0.5);
    margin-right: 15px;
    float: right;
  }
  p{
    width: 190px;
  }
}
.steps{
  margin-top:20px ;
  .step{
    margin-top:20px ;
    img{
    width: 100%;
  }
  }
  
}
.club{
  width: 60px;
  height: 60px;
  background: rgba($color: #f5f5f5, $alpha: 0.5);
  border-radius:50px ;
  line-height: 60px;
  position: fixed;
  bottom: 70px;
  right: 10px;
  z-index: 5;
 
  b{
    text-align: center;
    font-size: 16px;
    color:#333
  }
}
</style>